<template>
	<view class="container">
		<Header :isHomepage="false"></Header>
		<!-- 主要内容区 -->
		<view class="main-content">
			<!-- 最新追思 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">最新追思</text>
					<text class="more"></text>
				</view>
				<view class="memorial-grid">
					<view class="memorial-item" v-for="(item, index) in latestMemorials" :key="index" @click="goToDetail(item)">
						<image class="memorial-image" :src="item.avatar" mode="aspectFill"></image>
						<text class="memorial-name">{{item.name}}</text>
					</view>
				</view>
				<view class="loadMore" @click="getMore" v-if="count > latestMemorials.length">{{ loadText }}</view>
			</view>
		</view>
			

		<!-- 底部导航 -->
		<view class="footer">
			<view class="footer-nav">
				<text class="nav-item">网上纪念馆</text>
				<text class="nav-item">天堂资讯</text>
				<text class="nav-item">帮助中心</text>
			</view>
			<view class="copyright">
				<text>版权所有©今生永恒网 www.cqjsyh.com</text>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>
<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import { useRouter } from 'vue-router';
	import Header from '@/components/header/index.vue'
	import Footer from '@/components/footer/index.vue'
	import { apiMuLists } from '@/api/graveyard.js'

	const router = useRouter();


	// 路由参数
	const textWord = ref('')

	const latestMemorials = ref([]);




	// 分页
	const pageInfo = ref({
		page_no: 1,
		page_size: 15,
	})
	const count = ref(0)
	const loadText = ref('加载更多')
	// 获取数据
	const getApiMuListsFun = async () => {
		let obj = {} as any
		if(textWord.value){
			obj.name = textWord.value
		}
		await apiMuLists({...obj, ...pageInfo.value}).then(res=>{
			console.log(res)
			if(res.code == 1){
				latestMemorials.value = [...latestMemorials.value, ...res.data.lists]
				count.value = res.data.total
			}
		}).catch(error=>{
			console.log(error)
		})
	}

	// 去详情
	const goToDetail = (item) => {
		console.log(item)
		uni.navigateTo({
			url: '/pages/individualSpace/index?id=' + item.id
		})
	}
	
	// 加载更多
	const getMore = async () => {
		pageInfo.value.page_no += 1
		await getApiMuListsFun()
	}

	onLoad(async (options)=>{
		console.log('options',options)
		if(options.text){
			textWord.value = options.text
		}
		await getApiMuListsFun()
	})
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	max-width: 750px;
	margin: 0 auto;
}

.header {
	background-color: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.site-name {
	font-size: 32rpx;
	color: #333;
}

.header-right {
	display: flex;
	gap: 20rpx;
}

.login-btn, .register-btn {
	font-size: 28rpx;
	color: #666;
}

/* 轮播图样式 */
.banner {
	width: 100%;
	height: 300rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.section {
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.more {
	font-size: 28rpx;
	color: #999;
}

/* 最新追思网格布局 */
.memorial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.memorial-grid .memorial-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.memorial-grid .memorial-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

.memorial-grid .memorial-name {
	font-size: 24rpx;
	color: #666;
	text-align: center;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.memorial-list, .news-list, .help-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.memorial-item, .news-item, .help-item {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.memorial-name, .news-title, .help-title {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.footer {
	background-color: #fff;
	padding: 30rpx;
	margin-top: 40rpx;
}

.footer-nav {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20rpx;
}

.nav-item {
	font-size: 28rpx;
	color: #666;
}

.copyright {
	text-align: center;
	font-size: 24rpx;
	color: #999;
	margin-top: 20rpx;
}

.modal-mask {
	position: fixed;
	z-index: 1000;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-modal {
	width: 400px;
	max-width: 90vw;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.18);
	padding: 0 0 24px 0;
	position: relative;
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 56px;
	border-bottom: 1px solid #f5e3c2;
	background: #fdf6e3;
	border-radius: 12px 12px 0 0;
}
.modal-tabs {
	display: flex;
	align-items: center;
}
.modal-tab {
	font-size: 18px;
	color: #b98c4b;
	padding: 0 16px;
	line-height: 56px;
	cursor: pointer;
}
.modal-tab.active {
	color: #e69c23;
	font-weight: bold;
	border-bottom: 2px solid #e69c23;
}
.modal-close {
	font-size: 28px;
	color: #b98c4b;
	cursor: pointer;
	margin-left: 12px;
}
.modal-body {
	padding: 24px 32px 0 32px;
	display: flex;
	flex-direction: column;
}
.modal-input {
	width: 100%;
	height: 40px;
	margin-bottom: 16px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 16px;
	background: #fafafa;
}
.modal-btn-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 8px;
	gap: 12px;
}
.modal-btn {
	min-width: 90px;
	height: 36px;
	border-radius: 4px;
	border: none;
	font-size: 16px;
	background: #f5f5f5;
	color: #666;
	margin-right: 8px;
}
.modal-btn.primary {
	background: #ffb43a;
	color: #fff;
}
.modal-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
	padding: 0 2px;
}
.modal-link {
	font-size: 14px;
	color: #b98c4b;
	cursor: pointer;
}
.modal-link.right {
	float: right;
}
.loadMore{
	width: 100%;
	display: flex;
	justify-content: center;
}
</style>